<template>
  <el-container>
    <el-header>
      <goback :content=name></goback>
    </el-header>
    <el-main>
      <el-row justify="space-between">
        <el-col :span="8">
          <div class="trade-box">
            <div class="h4-title">交易前</div>
            <div class="menu-box fcol">
              <div class="h4-title h3-title" @click="gotoPage('/supplier/projectRequest',{title:'项目需要'})">项目需要</div>
              <div class="h4-title h3-title">加紧项目需求</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="trade-box">
            <div class="h4-title">交易中</div>
            <el-table
              :data="processList.processing"
              :show-header="false"
              height="220px"
              @row-click="jumpOrder"
            >
              <el-table-column prop="id" fixed width="100"></el-table-column>
              <el-table-column prop="title" align="left"></el-table-column>
            </el-table>


          </div>
        </el-col>
        <el-col :span="8">
          <div class="trade-box">
            <div class="h4-title">交易后</div>
            <el-table
              :data="processList.completed"
              :show-header="false"
              height="220px"
              @row-click="jumpOrder"
            >
              <el-table-column prop="id" fixed width="100"></el-table-column>
              <el-table-column prop="title" align="left"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <router-view></router-view>
  </el-container>
</template>

<script>
    import goback from "../common/goback";
    import {getOrderList} from "../../apilist/Supplier";

    export default {
        name: "supplierHome",
        data(){
            return {
                name: '采购',
                processList: [],
            }
        },
        components: {goback},
        methods: {
            gotoPage(path,query){
                this.$router.push(
                    {
                        path: path,
                        query: query
                    }
                );
            },
            jumpOrder(row,col,e){
                const {id,title} = row
                this.$router.push(
                    {
                        path: '/supplier/detail',
                        query: {
                            id: id,
                            name: title,
                        }
                    }
                )
            }
        },
  mounted() {
      getOrderList().then(res => {
          this.processList = res.data
      });
  }
    }
</script>

<style scoped>
  .trade-box{
    width:500px;
    height:260px;
    border:1px solid #fff;
    border-radius: 20px;
  }
  .h4-title{
    text-align: center;
    width:100%;
    height:40px;
    line-height: 40px;
    background-color: #1E9FFF;
    color:#fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
  .menu-box{
    margin-top: 5px;
    height:60%;
  }
  .h3-title{
    height:60px;
    line-height: 60px;
    border-radius:0px;
  }
</style>
